<template>
    <div class="form-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">硕士学位申请系统</el-breadcrumb-item>
            <el-breadcrumb-item>双盲评审信息</el-breadcrumb-item>
        </el-breadcrumb>
        <el-tabs v-model="activeName">
            <el-tab-pane label="双盲评审申请" name="request">
                <!--                <h2>双盲评审信息</h2>-->
                <el-form :model="form" ref="form" label-width="100px" :disabled="isDisabled">
                    <el-form-item label="学号" prop="student_id">
                        <el-input v-model="form.student_id"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="paperName">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="论文题目" prop="title_cn">
                        <el-input v-model="form.title_cn"></el-input>
                    </el-form-item>
                    <el-form-item label="论文英文题目" prop="title_en">
                        <el-input v-model="form.title_en"></el-input>
                    </el-form-item>
                    <!--                    <el-form-item label="是否盲审" prop="blind_review">-->
                    <!--                        <el-radio-group v-model="form.blind_review">-->
                    <!--                            <el-radio label="是"></el-radio>-->
                    <!--                            <el-radio label="否"></el-radio>-->
                    <!--                        </el-radio-group>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="送审时间" prop="submit_time">
                        <el-date-picker
                                v-model="form.submit_time"
                                type="date"
                                placeholder="请选择日期"
                        ></el-date-picker>
                    </el-form-item>
                    <!--                    <el-form-item label="论文编号" prop="paper_no">-->
                    <!--                        <el-input v-model="form.paper_no"></el-input>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="上传论文文件">
                        <el-upload
                                class="upload-demo"
                                action="http://localhost:8081/api/file/upload"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="3"
                                :on-exceed="handleExceed"
                                :file-list="fileList"
                                :on-success="handleUploadSuccess"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="双盲评审结果" name="result">
                <!--                <h2>双盲评审信息</h2>-->
                <el-form :model="form" ref="form" label-width="100px" disabled>
                    <el-form-item label="学号" prop="student_id">
                        <el-input v-model="form.student_id"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="paperName">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="论文题目" prop="title_cn">
                        <el-input v-model="form.title_cn"></el-input>
                    </el-form-item>
                    <el-form-item label="论文英文题目" prop="title_en">
                        <el-input v-model="form.title_en"></el-input>
                    </el-form-item>
                    <!--                    <el-form-item label="是否盲审" prop="blind_review">-->
                    <!--                        <el-radio-group v-model="form.blind_review">-->
                    <!--                            <el-radio label="是"></el-radio>-->
                    <!--                            <el-radio label="否"></el-radio>-->
                    <!--                        </el-radio-group>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="送审时间" prop="submit_time">
                        <el-date-picker
                                v-model="form.submit_time"
                                type="date"
                                placeholder="请选择日期"
                        ></el-date-picker>
                    </el-form-item>
                    <!--                    <el-form-item label="论文编号" prop="paper_no">-->
                    <!--                        <el-input v-model="form.paper_no"></el-input>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="论文文件">
                        <el-upload
                                class="upload-demo"
                                action="http://localhost:8081/api/file/upload"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="3"
                                :on-exceed="handleExceed"
                                :file-list="fileList"
                                :on-success="handleUploadSuccess"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="结果" prop="result">
                        <el-radio-group v-model="result">
                            <el-radio label="已处理">已处理</el-radio>
                            <el-radio label="等待处理">等待处理</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
import axios from "axios";
// import { mapState } from "vuex";
export default {
    data() {
        return {
            activeName: 'request',
            result: '',
            form: {
                student_id: "",
                name: "",
                title_cn: "",
                // blind_review: "",
                title_en: "",
                submit_time: "",
                // paper_no: "",
                isQualified: true,
                link: "",
            },

            rules: {
                student_id: [
                    {required: true, message: "请输入学号", trigger: "blur"},
                ],
                name: [{required: true, message: "请输入姓名", trigger: "blur"}],
                title_cn: [
                    {required: true, message: "请输入论文题目", trigger: "blur"},
                ],
                blind_review: [
                    {required: true, message: "请选择是否盲审", trigger: "blur"},
                ],
                submit_time: [
                    {required: true, message: "请选择送审时间", trigger: "change"},
                ],
                paper_no: [
                    {required: true, message: "请输入论文编号", trigger: "blur"},
                ],
            },
            //   isFormDisabled: "false",
            fileList: [],
            id: '',
        };
    },
    methods: {
        getStuInfo() {
            axios({
                url: `http://localhost:8888/blind/info/stuName/${this.id}`,
                method: 'get',
                responseType: 'json',
            }).then(res => {
                this.form.student_id = res.data.data.id;
                this.form.name = res.data.data.stuName;
            }).catch(err => {
                console.log(err)
            })
        },
        getPaperInfo() {
            axios({
                url: `http://localhost:8888/blind/info/detail/${this.id}`,
                method: 'get',
                responseType: "json",
            }).then(res => {
                const paper = res.data.data;
                this.form.title_cn = paper.paperName;
                this.form.submit_time = paper.blindTime;
                this.form.title_en = paper.paperNameEn;
                this.result = paper.isQualified;
                // this.form.isQualified = paper.isQualified==='同意'?false:true;
            }).catch(err => {
                console.log(err);
            });
            axios({
                url: `http://localhost:8888/paper/info/result/${this.id}`,
                method: 'get',
                responseType: 'json',
            }).then(res => {
                this.form.isQualified = res.data.data.isQualified === '同意' ? false : true;
            }).catch(err => console.log(err));
        },
        handleUploadSuccess(response, file, fileList) {
            console.log("上传成功，服务器响应：", response.data);
            this.form.link = response.data;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
                    files.length + fileList.length
                } 个文件`
            );
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        submitForm() {
            console.log("提交");

            axios({
                method: "put",
                url: `http://localhost:8888/blind/info/edit/${this.id}`,
                data: {
                    "paperName": this.form.title_cn,
                    "paperNameEn": this.form.title_en,
                    "blindTime": this.form.submit_time,
                },
            }).then((response) => {
                console.log("提交结果", response.data);
                // 提交成功后弹出提示
                this.$message({
                    message: "提交成功",
                    type: "success",
                });
            }).catch(err=> {
                console.log(err)
            });
            // var tag = document.getElementById("is_saved");
            // console.log(tag);
            // tag.innerHTML = "已保存";
            // tag.className = "el-tag el-tag--success el-tag--light";
        },
        resetForm() {
            this.$refs.form.resetFields();
        },
    },
    computed: {
        isDisabled() {
            return this.form.isQualified;
        }
    },
    created() {
    },
    mounted() {
        this.id = localStorage.getItem('username');
        this.getStuInfo();
        this.getPaperInfo();
    }
};
</script>

<style scoped>
/*.form-container {*/
/*    width: 90%;*/
/*    margin: 0 auto;*/
/*    !* padding: 50px 100px; *!*/
/*    !* border: 1px solid red; *!*/
/*}*/
</style>
